@import './common';

section {
  .item-one {
    position: relative;

    >.swiper-container {
      width: 100%;
      --swiper-theme-color: #000;

      >.swiper-wrapper {
        >.swiper-slide {
          img {
            width: 100%;
          }
        }
      }

      >.swiper-button-prev {
        left: 7%;
        background-color: #fff;
        width: 40px;
        height: 64px;
        transform: translateY(-50%);

        >i {
          font-size: 26px;
        }

        &::after {
          display: none;
        }
      }

      >.swiper-button-next {
        right: 7%;
        background-color: #fff;
        width: 40px;
        height: 64px;
        transform: translateY(-50%);

        >i {
          font-size: 26px;
        }


        &::after {
          display: none;
        }
      }
    }

    >.sw2-pagination {
      transform: translate(-50%);
      left: 50%;
      bottom: -25px;

      >.swiper-pagination-bullet {
        margin: 0 4px;
        background-color: #000;
      }
    }
  }

  .item-two {
    margin: 0 auto;
    padding: 120px 15px 0;
    max-width: 1310px;

    >.two-title {
      >p {
        margin-bottom: 16px;
        font-size: 16px;
        font-weight: 700;
        text-align: center;

        &:last-child {
          margin-bottom: 30px;
          font-size: 24px;
          letter-spacing: 6px;
        }
      }
    }

    >.two-nav {
      margin: 0 auto 40px;
      max-width: 775px;
      border-bottom: 1px solid #e5e5e5;
      text-align: center;

      ul {
        display: inline-block;

        li {
          padding: 0 20px;
          display: inline-block;
          height: 25px;
          line-height: 25px;
          color: #a6a6a6;
          cursor: pointer;
        }
      }

      .two-active {
        position: relative;
        // width: 130px;
        color: #000;
        border-bottom: 1px solid #000;

        // &::before {
        //   content: '';
        //   display: block;
        //   width: 100%;
        //   height: 1px;
        //   background-color: #000;
        //   position: absolute;
        //   bottom: -1px;
        // }

        &::after {
          content: '';
          display: block;
          width: 0;
          height: 0;
          border-width: 8px;
          border-style: solid;
          border-color: #000 transparent transparent;
          position: absolute;
          top: 100%;
          left: 50%;
          transform: translateX(-50%);
        }
      }
    }

    >.two-container-father {
      position: relative;
      margin: 0 auto;
      width: 1280px;
      height: 470px;

      >.two-container {
        position: absolute;
        top: 0;
        left: 0;
        max-width: 1280px;
        --swiper-theme-color: #000;
        transition: all .5s ease;

        &:nth-of-type(2),
        &:nth-of-type(3),
        &:nth-of-type(4) {
          opacity: 0;
        }

        >.two-container-one {
          display: flex;
          display: -webkit-flex;

          >.two-container-pic {
            width: 38%;

            a {
              width: 100%;
              height: 100%;

              img {
                width: 100%;
                height: 100%;
              }
            }
          }

          >.swiper-container {
            margin-left: 20px;
            width: 57.5%;

            >.swiper-wrapper {
              >.swiper-slide {
                display: flex;
                display: -webkit-flex;

                .two-container-right {
                  margin-right: 20px;
                  width: 243px;

                  .content-top {
                    position: relative;

                    a {
                      img {
                        width: 100%;
                      }

                      &:hover~.hiddle-btn {
                        display: block;
                      }
                    }

                    .tag {
                      position: absolute;
                      top: 0;
                      left: 0;

                      >span {
                        display: inline-block;
                        height: 22px;
                        width: 48px;
                        text-align: center;
                        background-color: #000;
                        font-size: 12px;
                        letter-spacing: 0.75px;
                        color: #fff;
                        line-height: 22px;
                      }
                    }

                    .hiddle-btn {
                      position: absolute;
                      top: 0;
                      left: 0;
                      width: 100%;
                      height: 100%;
                      background-color: rgba(255, 255, 255, .55);
                      display: none;

                      .btn-box {
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translateX(-50%) translateY(-50%);

                        .btn-box-one {
                          >a {
                            position: relative;
                            display: inline-block;
                            width: 180px;
                            height: 45px;
                            background-color: #fff;
                            color: #000;
                            font-size: 14px;
                            line-height: 45px;
                            border: 1px solid #000;
                            text-align: center;

                            .icon-handbag {
                              position: absolute;
                              top: 0;
                              left: 15%;
                            }
                          }

                          .btn-active {
                            background-color: #000;
                            color: #fff;

                            &:hover {
                              .icon-handbag {
                                display: none;
                              }
                            }
                          }

                          .btn-hov {
                            &:hover {
                              background-color: #000;
                              color: #fff;
                            }
                          }

                          &:first-child {
                            >a {
                              margin-bottom: 10px;
                            }
                          }
                        }
                      }

                      &:hover {
                        display: block;
                      }
                    }
                  }

                  .content-bottom {
                    text-align: center;

                    >.goods-select {
                      padding: 10px 22px 30px;
                      height: 70px;
                    }

                    >h3 {
                      margin-bottom: 3px;
                      font-size: 14px;
                      line-height: 18px;
                      height: 36px;

                      >a {
                        color: #000;
                        font-weight: 700;
                      }
                    }

                    >p {
                      a {
                        color: #000;
                      }

                      &:nth-of-type(2) {
                        margin-top: 5px;
                        margin-bottom: 15px;
                        height: 20px;
                        line-height: 20px;

                        a {
                          font-size: 12px;
                          color: #a2a2a2;
                        }
                      }
                    }

                    .bottom-last {
                      margin-top: 17px;
                      margin-bottom: 10px;
                      display: flex;
                      display: -webkit-flex;

                      .last-star {
                        width: 50%;

                        .icon-wujiaoxing {
                          font-size: 10px;
                          color: grey;
                        }
                      }

                      .last-money {

                        width: 50%;

                        >span {
                          margin-bottom: 5px;
                          font-size: 12px;
                          font-weight: 700;
                          color: #000;
                          position: relative;

                          &::before {
                            content: '';
                            display: block;
                            position: absolute;
                            left: -80%;
                            top: 0;
                            width: 1px;
                            height: 25px;
                            background-color: #dadada;
                          }
                        }
                      }
                    }
                  }
                }
              }
            }

            >.swiper-button-prev {
              left: 0;
              width: 40px;
              height: 64px;
              transform: translateY(-50%);

              >i {
                font-size: 34px;
              }

              &::after {
                display: none;
              }
            }

            >.swiper-button-next {
              right: 0;
              width: 40px;
              height: 64px;
              transform: translateY(-50%);

              >i {
                font-size: 34px;
              }


              &::after {
                display: none;
              }
            }
          }
        }
      }
    }
  }

  .item-three {
    padding-top: 120px;
    padding-bottom: 52px;

    >.three-title {
      >p {
        margin-bottom: 16px;
        font-size: 16px;
        font-weight: 700;
        text-align: center;

        &:last-child {
          margin-bottom: 30px;
          font-size: 24px;
          letter-spacing: 6px;
        }
      }
    }

    >.three-content {
      >.three-content-one {
        >ul {
          margin: 0 auto;
          max-width: 1280px;
          font-size: 0;
          display: flex;
          display: -webkit-flex;

          >li {
            padding: 0 8px;
            width: 25%;

            >.img-box {
              margin-right: 10px;
              width: 100%;
              background-color: #fff;

              a {
                img {
                  width: 100%;
                }
              }
            }

            >.text-box {
              padding: 28px 38px 0;

              .text-box-title {
                margin-bottom: 26px;
                font-size: 17px;
                font-weight: 700;

                >a {
                  color: #000;
                }
              }

              .text-box-details {
                font-size: 13px;
                color: #969696;
                height: 40px;
                line-height: 20px;
              }

              .text-box-link {
                margin-top: 62px;
                font-size: 12px;

                >a {
                  color: #000;
                  border-bottom: 1px solid #000;
                  line-height: 20px;
                }
              }
            }
          }
        }
      }
    }
  }

  .item-four {
    margin-bottom: 90px;

    a {
      img {
        width: 100%;
      }
    }
  }

  .item-five {
    position: fixed;
    right: 0;
    bottom: 35%;
    z-index: 999;
    width: 66px;
    background-color: #000;
    font-size: 0;

    .item-five-top {
      padding: 25px 0;
      position: relative;

      >a {
        >.icon-zixun-tousu {
          position: absolute;
          top: 25px;
          left: 50%;
          transform: translateX(-50%);
          color: #fff;
          font-size: 30px;
        }

        >p {
          text-align: center;
          font-size: 14px;
          padding-top: 30px;
          color: #fff;
        }
      }
    }

    .item-five-bottom {
      border-top: 1px solid #636363;

      .icon-shangjiantou_huaban {
        position: absolute;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        color: #fff;
        font-size: 33px;
      }

      p {
        font-size: 18px;
        font-weight: 700;
      }
    }
  }
}